<template>
	<div class="contacts">
	        <div class="current-user">
				<image :src="currentUser && currentUser.avatar" class="current-user__avatar"></image>
	            <span>{{currentUser && currentUser.name}}</span>
	        </div>
	        <div class="contacts-container">
	            <div class="user-list">
	                <div class="user-list-item" v-for="(friend, friendUUID) in friends || []" :key="friendUUID" @click="enterChat(friendUUID)">
	                    <div class="user-item-avatar">
							<image :src="friend.avatar" :class="friend.online ? '' : 'offline-gray'" ></image>
							<image src="/static/images/green-dot.png" class="online-dot"  v-if="friend.online"></image>
	                    </div>
	                    <div class="user-item-info">
	                        <span class="user-item-info__name">{{friend.name}}</span>
	                        <span class="user-item-info__tips" v-show="friend.unReadMessage">{{friend.unReadMessage}}</span>
	                    </div>
	                </div>
	            </div>
	            <div class="user-list">
	                <div class="user-list-item" v-for="(group, groupUUID) in groups || []" :key="groupUUID" @click="enterGroup(groupUUID)">
	                    <div class="user-item-avatar">
	                        <image src="/static/images/group.png" />
	                    </div>
	                    <div class="user-item-info">
	                        <span class="user-item-info__name">{{group.name}}</span>
	                        <span class="user-item-info__tips" v-show="group.unReadMessage">{{group.unReadMessage}}</span>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
</template>

<script>
	export default {
		name: "contacts",
		data () {
			return {
				friends : null,
				groups : null,
				currentUser : null
			}
		},
		onShow() {
			if(!this.imService.currentUser){
				uni.navigateTo({
					url : '../login/login'
				})
			}
			this.currentUser = this.imService.currentUser;
			this.friends = this.imService.friends;
			this.groups = this.imService.groups;
			this.imService.onFriendListChange=this.onFriendListChange;	
		},
		onUnload () {
			this.imService.disconnect()
		},
		methods : {
			enterChat (friendUUID) {//进入私聊
				let friend = this.friends[friendUUID];
				uni.navigateTo({
					url : '../privateChat/privateChat?friend=' + JSON.stringify(friend)
				})
			},
			enterGroup (groupUUID) {//进入群聊
				let group = this.groups[groupUUID]
				uni.navigateTo({
					url : '../groupChat/groupChat?group=' + JSON.stringify(group)
				})
			},
			onFriendListChange(onlineFriends) {
				//todo:比较垃圾的处理方式，因为Uniapp的基于MAP的双向绑定在H5端不稳定，H5端偶尔会抽风
				// 下边这一行删掉，有时候页面可以更新，有时候不行，大家有优雅的方式，也欢迎跟我们沟通
				this.$forceUpdate();
			}
		}
	}
</script>

<style>
	.contacts{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.contacts .header{
	  height: 128rpx;
	  line-height: 128rpx;
	  font-size: 36rpx;
		background: linear-gradient(0deg, #D02129, #D02129),
		linear-gradient(195.96deg, #F33A3A 9.83%, #D02129 105.7%);
		font-family: Source Han Sans CN;
		font-style: normal;
		font-weight: 500;
		text-align: center;
		color: #FFFFFF;
	}
	.contacts .current-user{
	  height: 140rpx;
	  padding: 20rpx;
	  font-size: 30rpx;
		background: #efefef;
		display: flex;
		align-items: center;
		flex-direction: column;
		text-align: center;
		color: #262628;
		font-family: Source Han Sans CN;
	}
	.contacts .contacts-container{
		width: 100%;
		overflow: auto;
	}
	.contacts .current-user__avatar{
	  width: 96rpx;
	  height: 96rpx;
	  border-radius: 48rpx;
	}
	.contacts .user-list-item{
	  height: 160rpx;
	  padding-left: 32rpx;
		display: flex;
		align-items: center;
	}
	.contacts .offline-gray{
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
		filter: gray;
	}

	.contacts .user-list{
		flex-grow: 1;
		background: #ffffff;
		display: flex;
		flex-direction: column;
	}
	.contacts .user-item-avatar{
	  width: 96rpx;
	  height: 96rpx;
	  margin-right: 32rpx;
		overflow: hidden;
		position: relative;
	}
	.contacts .user-item-avatar image{
		width: 100%;
		height: 100%;
		display: block;
	}
	.contacts .user-item-info{
	  height: 136rpx;
	  padding-right: 32rpx;
	  line-height: 88rpx;
		flex-grow: 1;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.contacts .user-item-info__name{
	  font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-style: normal;
		font-weight: bold;
		color: #262628;
	}
	.contacts .user-item-info__tips{
	  height: 44rpx;
	  width: 64rpx;
	  border-radius: 24rpx;
	  font-size: 26rpx;
	  line-height: 44rpx;
		background: #D02129;
		color: #ffffff;
		font-family: Cabin;
		text-align: center;
	}
	.contacts .online-dot{
	  position: absolute;
	  width: 32rpx!important;
	  height: 32rpx!important;
	  right: 0;
	  bottom: 0;
	}

</style>
